<script lang="ts">
  import { computed, defineComponent, ref, unref, watchEffect, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useAppStore } from '@/store/modules/app';
  import API_HOME from '@/apis/home';
  export default defineComponent({
    name: 'myFooter',
    setup () {
      let shopName = ref('DNS')
      let shopAbout = ref('1')
      let copyright = ref('1')
      let copyTime = ref('1')
      // 获取商品标题
      let getTitle = async () => {
        let res = await API_HOME.indexConfigValue({
          code: 'name'
        })
        if (res.code == 1) {
          shopName.value = res.data
        }
      }
      let getAboutUs = async () => {
        let res = await API_HOME.indexConfigValue({
          code: 'about_us'
        })
        if (res.code == 1) {
          shopAbout.value = res.data
        }
      }
      let getcopyright = async () => {
        let res = await API_HOME.indexConfigValue({
          code: 'copyright'
        })
        if (res.code == 1) {
          copyright.value = res.data
        }
      }
      let getcopyTime = async () => {
        let res = await API_HOME.indexConfigValue({
          code: 'copytime'
        })
        if (res.code == 1) {
          copyTime.value = res.data
        }
      }
      onMounted(() => {
        getTitle()
        getAboutUs()
        getcopyright()
        getcopyTime()
      })

      watchEffect(() => {

      });


      return {
        shopName, shopAbout,
        copyright, copyTime
      };
    },
  });
</script>

<template>
  <div class="footer">
    <div class="footer_nav">
      <h1>{{shopName}}</h1>
      <span v-html="shopAbout"></span>
      <span>{{copyright}}</span>
    </div>
    <div class="footer_tit">
      {{ copyTime}}
    </div>
  </div>
</template>

<style lang="less" scoped>
  .footer {
    background-color: #f0f0f0;

    padding: 50px;

    .footer_nav {
      display: flex;
      flex-direction: column;
      text-align: left;

    }

    .footer_tit {
      text-align: center;
      padding: 50px 0;
    }
  }
</style>